<template>
<div class="up-file-img" v-if='url'>

    <div class="del" @tap='del'>
        <i-icon type="close"  size=14 />
    </div>
    
    <div class="img">
        <div>
            <img :src="url" alt="">
        </div>
    </div>

</div>
</template>

<script>
export default {
    props: {
        url: '',
    },
    data: function() {	
        return {}
    },
    methods: {
        del(){
            this.$emit('delete', this.url)
        }
    }
}
</script>

<style scoped lang='less'>

@size: 180rpx;

.up-file-img{
    display: inline-block;
    position: relative;

    .del{
        @size: 42rpx;
        position: absolute;
        top: @size/-2;
        right: @size/-2;
        
        width: @size;
        height: @size;
        border-radius: 100%;
        text-align: center;
        line-height: @size;
        background: @dangerColor;
        z-index: 9;
        color: #fff;
    }
    
    .img{
        &:extend(.img-box);
        width: @size;
        height: @size;
        border-radius: 6rpx;
        img{
            width: @size;
            height: @size;
        }
    }
}


</style>